<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <!-- 
      ① 没有参数的情况下 
      在没有参数的情况下方法的括号可以省略；
    -->
    <button @click="btn1Fun()">按钮1</button>
    <button @click="btn1Fun">按钮2</button>
    <!-- 
      ② 在有形参但是为传递实参的情况下
      携带 "()" 时会打印 "undefined"
      省略 "()" 时 vue 会将浏览器生成的 "event" 对象传到方法中；
     -->
    <button @click="btn2Fun()">按钮3</button>
    <button @click="btn2Fun">按钮4</button>
    <!-- 
      ③ 在需要传递参数的同时还需要 "event" 对象时
      在不传递参数且省略括号时，vue 会将 "event" 对象传递给第一个参数
      想将 "event" 对象传递给方法需要该写法 "$event"
      注意事项：在传递参数时未加引号时 会将参数当作变量处理
     -->
    <button @click="btn3Fun('嘻嘻',$event)">按钮5</button>
    <button @click="btn3Fun($event)">按钮6</button>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        message:'你好啊，李银河！'
      }
    },
    methods:{
      btn1Fun() {
        console.log("我没有参数");
      },
      btn2Fun(event) {
        console.log(event,'芜湖');
      },
      btn3Fun(val, event) {
        console.log(val,'芜湖',event);
      }
    },
    computed:{
 
    }
  })
  </script>
</body>
</html>